<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['销售管理', '销售合同']" currentMenu="提交生产订单"> </crumbs>
    <div class="uni-card">
      <div class="bd-line"></div>
      <div class="item-wrap">
        <div class="detail-item">
          <p class="subtitle">合同编号</p>
          <p class="secondary-text">{{ detailInfo.contractCode || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">合同名称</p>
          <p class="secondary-text">{{ detailInfo.contractName || '-' }}</p>
        </div>
        <div class="detail-item" />
        <div class="detail-item">
          <p class="subtitle">所属客户</p>
          <p class="secondary-text">{{ detailInfo.customerIdText || '-' }}</p>
        </div>
        <div class="detail-item">
          <p class="subtitle">承诺交期</p>
          <p class="secondary-text">{{ detailInfo.promiseDate || '-' }}</p>
        </div>
        <div class="detail-item" />
      </div>
    </div>
    <div class="cards-box">
      <!-- 发货记录---------------- begin ---------------- -->
      <div style="height: 100%">
        <div class="table-wrap">
          <a-table
            row-key="id"
            size="middle"
            :scroll="{ x: '100%', y: 'calc(100vh - 460px)' }"
            :hideDefaultSelections="false"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
              fixed: true,
            }"
            :columns="orderColumns"
            :dataSource="orderList"
            :pagination="false"
          >
            <span
              slot="planProductNum"
              slot-scope="text, record, index"
              :title="`${record.planProductNum || ''} ${record.planProductNumUnitText || ''}`"
            >
              <a-input
                v-model="record.planProductNum"
                @input="(e) => inputNum(e, index)"
                @blur="(e) => blurNum(e, index)"
                style="width: 100%"
                placeholder="请输入"
              >
                <div slot="suffix" style="background: #fff">
                  {{ record.planProductNumUnitText ? subStrText(record.planProductNumUnitText, 3) : '' }}
                </div>
              </a-input>
            </span>
            <span slot="dealUnitTitle"
              >合同订购数量
              <a-tooltip
                ><template slot="title">等于本合同中此商品用户下单的数量</template
                ><a-icon type="question-circle" /></a-tooltip
            ></span>
            <span slot="totalNumTitle"
              >总需求
              <a-tooltip
                ><template slot="title"
                  >等于所有未归档合同中此商品订购总量 — 所有未归档合同中此商品仓库实发总量</template
                ><a-icon type="question-circle" /></a-tooltip
            ></span>
            <span slot="productionNumTitle"
              >在制品
              <a-tooltip
                ><template slot="title">已派发的生产工单中此商品总数 — 最后一道工序中已报工合格品总数</template
                ><a-icon type="question-circle" /></a-tooltip
            ></span>
            <span slot="sendNumTitle"
              >在途数
              <a-tooltip
                ><template slot="title">等于未归档的采购合同中此商品待签收总量</template
                ><a-icon type="question-circle" /></a-tooltip
            ></span>
            <span slot="numTitle"
              ><span style="color: #ff4d4f">计划生产基本单位数量 </span>
              <a-tooltip
                ><template slot="title">默认等于本合同订购数量，可修改</template
                ><a-icon type="question-circle" /></a-tooltip
            ></span>
          </a-table>
        </div>
      </div>
      <!-- 发货记录---------------- end ---------------- -->
    </div>
    <div class="footer-submit form-footer">
      <a-button type="primary" :loading="loadingSubmit" @click="handleSubmit"> 提交 </a-button>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import { API } from '@/api/requestFzs'
import { fourFloatNum, subStrText } from '@/utils/util'
export default {
  data() {
    const orderColumns = [
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        ellipsis: true,
        width: 150,
      },
      {
        title: '商品编号',
        dataIndex: 'goodsCode',
        ellipsis: true,
        width: 150,
      },
      {
        title: '规格',
        dataIndex: 'spec',
        ellipsis: true,
        width: 100,
      },
      {
        // title: '合同订购数量',
        dataIndex: 'saleNumUnitText',
        ellipsis: true,
        width: 200,
        slots: { title: 'dealUnitTitle' },
      },
      {
        title: '合同订购基本单位数量',
        dataIndex: 'saleBaseNumUnitText',
        ellipsis: true,
        width: 200,
      },
      {
        // title: '总需求',
        dataIndex: 'totalNeedNumText',
        ellipsis: true,
        width: 120,
        slots: { title: 'totalNumTitle' },
        scopedSlots: { customRender: 'totalNeedNum' },
      },
      {
        title: '当前合格品库存',
        dataIndex: 'currentQualifiedNumText',
        ellipsis: true,
        width: 150,
        scopedSlots: { customRender: 'currentQualifiedNum' },
      },
      {
        // title: '在制品',
        dataIndex: 'beingProcessedNumText',
        ellipsis: true,
        width: 120,
        slots: { title: 'productionNumTitle' },
        scopedSlots: { customRender: 'beingProcessedNum' },
      },
      {
        // title: '在途数',
        dataIndex: 'beingTripNumText',
        ellipsis: true,
        width: 120,
        slots: { title: 'sendNumTitle' },
        scopedSlots: { customRender: 'beingTripNum' },
      },
      {
        // title: '计划生产数量',
        fixed: 'right',
        dataIndex: 'saleBaseNum',
        ellipsis: true,
        width: 180,
        slots: { title: 'numTitle' },
        scopedSlots: { customRender: 'planProductNum' },
      },
    ]
    return {
      jkeForm: {
        title: '提交生产订单',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      subStrText,
      detailInfo: {},
      activeKey: '1',
      selectedRows: [],
      selectedRowKeys: [],
      orderColumns: orderColumns, // 订单columns
      orderList: [],
      loadingSubmit: false,
    }
  },
  components: {
    crumbs,
  },
  methods: {
    /* 本次申请发货-输入限制 */
    inputNum(e, i) {
      let nums = fourFloatNum(this.orderList[i].planProductNum)
      this.orderList[i].planProductNum = nums
      console.log(this.orderList)
    },
    blurNum(e, i) {
      if (e.target.value == '0') {
        this.orderList[i].planProductNum = ''
        this.$antdMessage.error('计划生产数量必须大于0')
      } else if (false) {
        this.orderList[i].planProductNum = ''
        this.$antdMessage.error('操作失败，本次申请发货数量不能大于剩余应申请数量')
      }
    },
    /* 列表选择 */
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    /* 切tab */
    callback(i) {
      this.activeKey = i
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    initForm(id) {
      this.jkeForm.visible = true
      API.erpSaleContractQueryById({ id: id }).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result
        }
      })
      API.erpProductOrderGetListVoByContractId({ contractId: id }).then((res) => {
        if (res.code == 200) {
          res.result.forEach((item) => {
            item.planProductNum = item.saleBaseNum
          })
          this.orderList = res.result
        }
      })
    },
    handleSubmit() {
      if (this.selectedRows.length == 0) {
        this.$antdMessage.info('请先选择数据')
        return
      }
      for (let i = 0; i < this.selectedRows.length; i++) {
        const row = this.selectedRows[i]
        if (!row.planProductNum) {
          this.$antdMessage.error('计划生产数量必填')
          return
        }
      }
      let parameter = []
      for (let i = 0; i < this.selectedRows.length; i++) {
        const row = this.selectedRows[i]
        row.promiseDate = this.detailInfo.promiseDate
        parameter.push(row)
      }
      // return
      this.loadingSubmit = true
      API.erpProductOrderProductOrderSubmit(parameter).then((res) => {
        if (res.code == 200) {
          this.$antdMessage.success(res.message)
          this.$emit('refresh')
          this.goBack()
        } else {
          this.$antdMessage.error(res.message)
        }
        this.loadingSubmit = false
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.detail-item:nth-of-type(n + 4) {
  margin-top: 40px;
}
.detail-item {
  width: 33%;
}
.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  height: calc(100vh - 361px);
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 12px 0;
  margin-top: 12px;
  background: #fff;
}
.table-wrap {
  height: calc(100% - 69px);
  background: #fff;
  padding: 24px;
  margin: 0 12px;
}
.form-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 100px;
  z-index: 2;
}
</style>
